<template>

  <div class="scale-box"
       ref="scaleBox">
    <div class="common-layout">
      <el-container>
        <el-header>
          <Haeder></Haeder>
        </el-header>
        <el-main>

          <Body></Body>
        </el-main>
        <el-footer>
          <Footer></Footer>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Haeder from '@/views/Header/index.vue'
import Body from '@/views/Body/index.vue'
import Footer from '@/views/Footer/index.vue'

// 引用DOM元素，用于应用缩放变换
const scaleBox = ref(null)

// 设计稿基准尺寸（1920x1080）
// 所有UI元素尺寸均基于此基准进行设计
const baseWidth = 1920
const baseHeight = 1080

/**
 * 计算并应用缩放变换，实现页面响应式布局
 * - 基于当前窗口尺寸与基准尺寸的比例计算缩放因子
 * - 分别计算水平和垂直方向的缩放比例
 * - 应用CSS transform实现整体缩放
 */
function setScale() {
  const clientWidth = window.innerWidth;
  const scale = clientWidth / baseWidth;

  if (scaleBox.value) {
    scaleBox.value.style.transform = `scale(${scale})`;
    scaleBox.value.style.transformOrigin = 'left top';
    scaleBox.value.style.width = `${baseWidth}px`;
    scaleBox.value.style.height = 'auto';
    scaleBox.value.style.maxWidth = '100%'; // 防止横向溢出
  }
}

// // 生命周期钩子：组件挂载后初始化
onMounted(() => {
  // 初始设置缩放
  setScale()

  // 添加窗口大小变化监听
  // 当窗口大小改变时重新计算并应用缩放
  window.addEventListener('resize', setScale)
})

// // 生命周期钩子：组件卸载前清理
onBeforeUnmount(() => {
  // 移除窗口大小变化监听
  // 防止内存泄漏和不必要的计算
  window.removeEventListener('resize', setScale)
})
</script>

<style scoped>

.scale-box {
  /* 定位容器，作为缩放变换的参考 */
  position: absolute;
  left: 0;
  top: 0;
}

.common-layout {
  width: 1920px; /* 保持设计稿宽度 */
  height: 100vh; /* 改为自适应高度 */
  /* 或者使用 min-height: 1080px; */
}
.el-header {
  padding: 0px;
  height: 100%;
}
.el-main {
  padding: 0px;
}
.el-footer {
  padding: 0px;
}

</style>
